<template>
  <el-form ref="form" label-width="100px" :model="form" :rules="formRules">
    <el-form-item label="院系" prop="college_name">
      <el-input v-model="form.college_name" placeholder="请输入院系名称" />
    </el-form-item>
    <el-form-item label="专业大类" prop="catalog_name">
      <el-input v-model="form.catalog_name" placeholder="请输入专业大类名称" />
    </el-form-item>
    <el-form-item label="专业名称" prop="major_name">
      <el-input v-model="form.major_name" placeholder="请输入专业名称" />
    </el-form-item>
    <el-form-item label="专业标签" prop="tags">
      <el-select v-model="form.tags" multiple placeholder="请选择" style="width: 100%;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="专业介绍" prop="information">
      <el-input v-model="form.information" type="textarea" :rows="4" placeholder="请输入专业介绍" />
    </el-form-item>
    <el-form-item label="开设课程" prop="kskc">
      <el-input v-model="form.kskc" type="textarea" :rows="4" placeholder="请输入开设课程" />
    </el-form-item>
    <el-form-item label="培养目标" prop="pymb">
      <el-input v-model="form.pymb" type="textarea" :rows="4" placeholder="请输入培养目标" />
    </el-form-item>
    <el-form-item label="培养要求" prop="pyyq">
      <el-input v-model="form.pyyq" type="textarea" :rows="4" placeholder="请输入培养要求" />
    </el-form-item>
    <el-form-item label="对口岗位" prop="dkgw">
      <el-input v-model="form.dkgw" type="textarea" :rows="4" placeholder="请输入对口岗位" />
    </el-form-item>
    <el-form-item label="就业前景" prop="jyqj">
      <el-input v-model="form.jyqj" type="textarea" :rows="4" placeholder="请输入就业前景" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :disabled="disabled" @click="handleSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { create } from '../../api/major'

export default {
  components: {
    // MajorInfoSelect: () => import('./components/MajorInfoSelect')
  },
  data() {
    return {
      disabled: false,
      form: {
        college_name: '',
        major_name: '',
        catalog_name: '',
        information: '',
        kskc: '',
        pymb: '',
        pyyq: '',
        dkgw: '',
        tags: [],
        jyqj: ''
      },
      options: [
        {
          label: 'C9',
          value: 'C9'
        },
        {
          label: '211',
          value: '211'
        },
        {
          label: '985',
          value: '985'
        },
        {
          label: '双一流',
          value: '双一流'
        },
        {
          label: '国家重点',
          value: '国家重点'
        },
        {
          label: '国家特色专业',
          value: '国家特色专业'
        }
      ],
      formRules: {
        major_name: [
          { required: true, message: '专业名称必须填写', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
        ],
        catalog_name: [
          { required: false, message: '专业大类名称必须填写', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
        ],
        college_name: [
          { required: true, message: '院系名称必须填写', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.disabled = true
          create(this.form).then(() => {
            this.$message.success('保存成功')
            this.$router.push({
              name: 'major-index'
            })
          }).finally(() => {
            this.disabled = false
          })
        } else {
          console.log('fail')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
